<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttbl' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="goods" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>

            <div style="background: #fff3e0;border: 1px solid #ff9966;padding: 15px 2.5%;border-radius: 5px;" class="layui-show">
                <p><fmt:message key='wxts' /></p>
                <br/>
                <p><fmt:message key='sybq' /> <b style="color:red">*</b> <fmt:message key='btx' /></p>
                <p><fmt:message key='22' /></p>
                <p><fmt:message key='33' /></p>
                <p><fmt:message key='44' /></p>
                <p><fmt:message key='55' /></p>
                <p><fmt:message key='66' /></p>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='jbxx' /></legend>
            </fieldset>

            <div class="layui-form-item goodsChannelArea">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='splm' /></label>

                    <%--                <c:if test="${_method eq 'POST'}">--%>
                    <%--                    <div class="layui-input-inline" style="width: 130px">--%>
                    <%--                        <select lay-verify="required" id="topChannel" lay-filter="topChannel">--%>
                    <%--                            <option value="">请选择</option>--%>
                    <%--                            <c:forEach items="${channels }" var="item">--%>
                    <%--                                <option value="${item.id}">${item.name}</option>--%>
                    <%--                            </c:forEach>--%>
                    <%--                        </select>--%>
                    <%--                    </div>--%>
                    <%--                </c:if>--%>

                <div class="layui-input-inline" style="width: 130px">
                    <select lay-verify="required" id="topChannel" lay-filter="topChannel">
                        <option value=""><fmt:message key='qxz' /></option>
                        <c:forEach items="${channels}" var="item">
                            <option value="${item.id}" <c:if test="${item.id == goods.goodsChannel.parent.parent.id}">selected</c:if>>${item.name}</option>
                        </c:forEach>
                    </select>
                </div>

                <c:if test="${_method eq 'PUT'}">
                    <div class="layui-inline middleChannel">
                        <div class="layui-input-inline" style="width: 130px">
                            <select lay-verify="required" id="middleChannel" lay-filter="middleChannel">
                                <option value="">请选择</option>
                                <c:forEach items="${goods.goodsChannel.parent.parent.children}" var="item">
                                    <option value="${item.id}" <c:if test="${item.id == goods.goodsChannel.parent.id}">selected</c:if>>${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline bottomChannel">
                        <div class="layui-input-inline" style="width: 130px">
                            <select lay-verify="required" name="goodsChannel.id" id="bottomChannel" lay-filter="bottomChannel">
                                <option value=""><fmt:message key='qxz' /></option>
                                <c:forEach items="${goods.goodsChannel.parent.children}" var="item">
                                    <option value="${item.id}"
                                            <c:if test="${item.id == goods.goodsChannel.id}">selected</c:if> >${item.name}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>
                </c:if>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spmc' /></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" lay-verify="required" placeholder="商品名称" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='sppp' /></label>
                <div class="layui-input-block" style="width: 200px;">
                    <select name="brand.id" id="brand" class="layui-input">
                        <option value="0"><fmt:message key='qxz' /></option>
                        <c:forEach items="${brands}" var="brand">
                            <option
                                    <c:if test="${goods.brand.id == brand.id}">selected</c:if> value="${brand.id}">${brand.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spbh' /></label>
                <div class="layui-input-block" style="width:700px;">
                    <form:input path="goodsNo" class="layui-input layui-inline" lay-verify="required" placeholder="<fmt:message key='spbh' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spjg' /></label>
                <div class="layui-input-block">
                    <form:input path="defaultPrice" class="layui-input" lay-verify="required|number" placeholder="<fmt:message key='spbh' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='scj' /></label>
                <div class="layui-input-block">
                    <form:input path="marketPrice" class="layui-input" lay-verify="required|number" placeholder="<fmt:message key='spbh' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='zl' /></label>
                <div class="layui-inline">
                    <form:input path="gram" class="layui-input" lay-verify="required|number" placeholder="<fmt:message key='zldwk' />" style="width: 200px;"/>
                </div>
                <div class="layui-inline">(<fmt:message key='dwk' />)</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spzxdw' /></label>
                <div class="layui-input-block" style="width: 200px;">
                    <select name="unit.id" class="layui-input" id="feijin-unitId">
                        <option value="0"><fmt:message key='qxz' /></option>
                        <c:forEach items="${units}" var="unit">
                            <option
                                    <c:if test="${goods.unit != null && goods.unit.id == unit.id}">selected</c:if> value="${unit.id}">${unit.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spgg' /></legend>
            </fieldset>


            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='sfygg' /></label>
                <div class="layui-inline">
                    <input type="radio" name="haveSku" lay-filter="haveSku" lay-verify="required" value="1" title="<fmt:message key='s' />" checked/>
                    <input type="radio" name="haveSku" lay-filter="haveSku" lay-verify="required" value="2" title="<fmt:message key='f' />" <c:if test="${goods.haveSku == 2}">checked</c:if>/>
                </div>
            </div>

            <%--规格类目--%>
            <div class="layui-form-item attributeArea" <c:if test="${goods.haveSku == 2}"> style="display:none;" </c:if> >
                <label class="layui-form-label"><fmt:message key='gglm' /></label>
                <div class="layui-inline">
                    <input type="hidden" id="feijin-attributechannel-select-hidden"/>
                    <select id="feijin-attributechannel-select" name="attributeChannel.id" lay-filter="feijin-attributechannel-select">
                        <option value="0"><fmt:message key='qxz' /></option>
                        <c:forEach items="${attributeChannels}" var="attributeChannel">
                            <option
                                    <c:if test="${goods.attributeChannel.id == attributeChannel.id}">selected</c:if> value="${attributeChannel.id}">${attributeChannel.name}</option>
                        </c:forEach>
                    </select>
                </div>
            </div>

            <form:hidden path="saleAttributeData"/>
            <form:hidden path="skusData"/>

            <div class="layui-form-item attributeArea goods-attribute" <c:if test="${goods.haveSku == 2}"> style="display:none;" </c:if> >
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='gg' /></label>
                <div class="layui-input-inline">
                    <select class="layui-input attribute-select" lay-filter="attribute-select">
                        <option value=""><fmt:message key='qxz' /></option>
                        <c:forEach items="${attributes}" var="item">
                            <option value="${item.id}" <c:if test="${item.id == goods.saleAttributes[0].attributeId}">selected</c:if>>${item.name}
                                <c:if test="${_method eq 'POST'}">
                                    <c:if test="${item.type == 1}"><fmt:message key='pt' /></c:if>
                                    <c:if test="${item.type == 2}"><fmt:message key='zijian' /></c:if>
                                </c:if>
                            </option>
                        </c:forEach>
                    </select>

                    <div style="width:600px;" class="layui-input-inline attribute-values">
                        <c:if test="${_method eq 'PUT'}">
                            <c:forEach items="${attributes}" var="item">
                                <c:if test="${item.id == goods.saleAttributes[0].attributeId}">
                                    <c:forEach items="${item.attributes}" var="attribute">
                                        <c:set var="isCheck" value="false"/>
                                        <c:forEach items="${goods.saleAttributes[0].values}" var="checkItem">
                                            <c:if test="${attribute.id == checkItem.attributeId}">
                                                <c:set var="isCheck" value="true"/>
                                            </c:if>
                                        </c:forEach>
                                        <input type='checkbox'
                                               <c:if test="${isCheck eq 'true'}">checked</c:if> class='attribute-value' lay-filter='attribute-value' value='${attribute.id}' title='${attribute.name}'/>
                                    </c:forEach>
                                </c:if>
                            </c:forEach>
                        </c:if>
                    </div>
                </div>
                <a href='javascript:void(0);' class='add-attribute-btn' style='color:blue; line-height: 38px;<c:if test="${fn:length(goods.saleAttributes) == 5}">display:none;</c:if>'><fmt:message key='tjgg' /></a>
            </div>

            <c:if test="${_method eq 'PUT' && fn:length(goods.saleAttributes) >= 2}">
                <c:forEach var="sale" items="${goods.saleAttributes}" begin="1">

                    <div class="layui-form-item attributeArea goods-attribute" <c:if test="${goods.haveSku == 2}"> style="display:none;" </c:if> >
                        <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='gg' /></label>
                        <div class="layui-input-inline">
                            <select class="layui-input attribute-select" lay-filter="attribute-select">
                                <option value=""><fmt:message key='qxz' /></option>
                                <c:forEach items="${attributes}" var="item">
                                    <option value="${item.id}" <c:if test="${item.id == sale.attributeId}">selected</c:if>>${item.name}
                                    </option>
                                </c:forEach>
                            </select>

                            <div style="width:600px;" class="layui-input-inline attribute-values">
                                <c:forEach items="${attributes}" var="item">
                                    <c:if test="${item.id == sale.attributeId}">
                                        <c:forEach items="${item.attributes}" var="attribute">
                                            <c:set var="isCheck" value="false"/>
                                            <c:forEach items="${sale.values}" var="checkItem">
                                                <c:if test="${attribute.id == checkItem.attributeId}">
                                                    <c:set var="isCheck" value="true"/>
                                                </c:if>
                                            </c:forEach>
                                            <input type='checkbox'
                                                   <c:if test="${isCheck eq 'true'}">checked</c:if> class='attribute-value' lay-filter='attribute-value' value='${attribute.id}' title='${attribute.name}'/>
                                        </c:forEach>
                                    </c:if>
                                </c:forEach>
                            </div>
                        </div>
                        <a href='javascript:void(0);' class='add-attribute-btn' style='color:blue; line-height: 38px;<c:if test="${fn:length(goods.saleAttributes) == 5}">display:none;</c:if>'><fmt:message key='tjgg' /></a>
                    </div>
                </c:forEach>
            </c:if>

            <div class="layui-form-item attributeArea" <c:if test="${goods.haveSku == 2}"> style="display:none;" </c:if>>
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spsku' /></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm" id="feijin-sku-table">
                        <thead>
                        <th><fmt:message key='gg' /></th>
                        <th><fmt:message key='sjbh' /></th>
                        <th><fmt:message key='kcs' /></th>
                        <th><fmt:message key='xsj' /></th>
                        </thead>
                        <tbody>
                        <c:forEach items="${goods.skus}" var="sku" varStatus="status">
                            <tr>
                                <td>${sku.skuNames}</td>
                                <td><input type="text" class="layui-input feijin-skuCode" data-index="${status.index}" data-id="${sku.skuNo}" value="${sku.code}"/></td>
                                <td><input type="text" class="layui-input" id="feijin-skuStore-${sku.skuNo}" value="${sku.store}"/></td>
                                <td><input type="text" class="layui-input" id="feijin-skuPrice-${sku.skuNo}" value="${sku.price}"/></td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-form-item noAttributeArea" <c:if test="${goods.haveSku != 2}"> style="display:none;" </c:if>>
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spsku' /></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <th><fmt:message key='spgg' /></th>
                        <th><fmt:message key='sjbh' /></th>
                        <th><fmt:message key='kcs' /></th>
                        <th><fmt:message key='xsj' /></th>
                        </thead>
                        <tbody>
                        <tr>
                            <td><fmt:message key='cg' /></td>
                            <td><input type="text" class="layui-input" id="default-skuCode" value="${goods.skus[0].code}"/></td>
                            <td><input type="text" class="layui-input" id="default-skuStore" value="${goods.skus[0].store}"/></td>
                            <td><input type="text" class="layui-input" id="default-skuPrice" value="${goods.skus[0].price}"/></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='yfjsfs' /></label>
                <div class="layui-inline">
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="1" title="<fmt:message key='yfmb' />" <c:if test="${goods.postageType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="2" title="<fmt:message key='by' />" <c:if test="${goods.postageType eq 2}">checked="checked"</c:if>/>
                    <input type="radio" name="postageType" lay-filter="postageType" lay-verify="required" value="3" title="<fmt:message key='zdyf' />" <c:if test="${goods.postageType eq 3}">checked="checked"</c:if>/>
                </div>
            </div>

            <div id="postageArea" style="display:none">
                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='zdyf' /></label>
                    <div class="layui-input-inline">
                        <form:input path="postage" lay-verify="required" class="layui-input" placeholder="指定运费" style="width: 200px;"/>
                    </div>
                </div>
            </div>

            <div id="templateArea" style="display:none">
                <div class="layui-form-item">
                    <label class="layui-form-label"><fmt:message key='zdyfmb' /></label>
                    <div class="layui-input-inline">
                        <select name="freightTemplate.id">
                            <option value="0"><fmt:message key='qxz' /></option>
                            <c:forEach items="${templates}" var="item">
                                <option value="${item.id}"
                                        <c:if test="${goods.freightTemplate.id eq item.id}">selected="selected"</c:if> >${item.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spxc' /></legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spfm' /></label>
                <div class="layui-inline">
                    <form:hidden path="defaultImage" id="defaultImage" class="layui-input"/>
                    <a href='javascript:void(0);' id="choose-defaultImage" value="<fmt:message key='shaungchuan' />" style='color:blue;line-height: 38px;'><fmt:message key='scspfm' /></a>
                        <%--&nbsp;&nbsp;&nbsp; 建议上传 200 * 200px 的图片，图片大小控制在100kb内，图片格式支持jpeg/jpg/png--%>
                    <div id="feijinImage-defaultImage">
                        <c:if test="${not empty goods.defaultImage}">
                            <img src="${store_domain}/uploads/${goods.defaultImage}" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                        <c:if test="${empty goods.defaultImage}">
                            <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='spxc' /></label>
                <div class="layui-input-block">

                    <form:hidden path="imagesData" id="feijin-imagesData" class="layui-input"/>

                    <a href='javascript:void(0);' id="choose-goodsImages" value="上传" style='color:blue;line-height: 38px;'><fmt:message key='scspxc' /></a>
                        <%--&nbsp;&nbsp;&nbsp; 建议上传 200 * 200px 的图片，图片大小控制在100kb内，图片格式支持jpeg/jpg/png--%>
                    <div id="feijinImageArea">
                        <c:choose>
                            <c:when test="${empty goods.images}">
                                <img id="goodsImages-defaultImage" src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                            </c:when>
                            <c:otherwise>
                                <c:forEach items="${goods.images}" var="goodsImage">
                                    <li id='li${goodsImage.id}' style='display: inline-block; text-align: center; margin: 10px 15px;'><img style='width:100px;height:100px; display: block; margin-bottom: 5px;' class='feijin-images' data-src='${goodsImage.name}' src='${store_domain}/uploads/${goodsImage.name}'/> <i class='i-close feijin-remove' data='${goodsImage.id}'><i class='layui-icon layui-btn layui-btn-danger layui-btn-xs'>&#xe640;</i></i></li>
                                </c:forEach>
                            </c:otherwise>
                        </c:choose>
                    </div>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"> <fmt:message key='spzzcl' /></label>
                <div class="layui-inline">
                    <form:hidden path="qualificationImage" id="qualificationImage" class="layui-input"/>
                    <a href='javascript:void(0);' id="choose-qualificationImage" value="上传" style='color:blue;line-height: 38px;'><fmt:message key='sczzcltp' /></a>
                    <div id="feijinImage-qualificationImage">
                        <c:if test="${not empty goods.qualificationImage}">
                            <img src="${store_domain}/uploads/${goods.qualificationImage}" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                        <c:if test="${empty goods.qualificationImage}">
                            <img src="${web_domain}/resources/images/default.jpeg" style="width:120px;height:120px;margin-top:10px;">
                        </c:if>
                    </div>
                </div>
            </div>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend><fmt:message key='spnr' /></legend>
            </fieldset>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='spcs' /></label>
                <div class="layui-inline">
                    <form:hidden path="paramsData"/>
                    <a href='javascript:void(0);' id='feijin-addParams' style='color:blue;line-height: 38px;'><fmt:message key='tjspcs' /></a>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <div class="layui-inline" id="feijin-goods-params-area" style="width:500px;">

                    <c:if test="${_method eq 'PUT'}">
                        <c:forEach items="${goods.paramses}" var="item" varStatus="index">
                            <div id="feijin-params-item-${index.index}">
                                <input type="text" class="layui-inline layui-input feijin-params-key" value="${item.paramsName}" placeholder="<fmt:message key='qsrcsmc' />" data-index="${index.index}" style="width:200px;display:inline-block"/><b>:&nbsp;&nbsp;</b>
                                <input type='text' class='layui-inline layui-input' value="${item.paramsValue}" id='feijin-params-value-${index.index}' placeholder='<fmt:message key='qsrcsz' />' style='width:200px;display: inline-block;'/>
                                <a href='javascript:void(0);' class='feijin-params-remove' data-index='${index.index}' style='margin-left: 10px;color:red;'><fmt:message key='sc' /></a>
                            </div>
                        </c:forEach>
                    </c:if>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><span style="color: red;">*</span> <fmt:message key='spms' /></label>
                <div class="layui-input-inline" style="width: 70%">
                    <div id="feijin-content" style="height:400px; width: 100%;"></div>
                    <form:hidden path="content"/>
                </div>
            </div>


            <div class="layui-input-block">
                <div style="display: none"><input type="button" value="保存" class="layui-btn" id="submit" lay-filter="submit" lay-submit></div>
            </div>

        </form:form>
    </div>
</div>

<div style="display:none;">

    <input type="hidden" id="hidden-attributeChannelRelevancy"/>

    <form action="${web_domain}/upload/image" method="post" id="upload-defaultImage" enctype="multipart/form-data">
        <input id="defaultImage-file" name="file" type="file"/>
    </form>

    <form action="${web_domain}/upload/image" method="post" id="upload-qualificationImage" enctype="multipart/form-data">
        <input id="qualificationImage-file" name="file" type="file"/>
    </form>

    <!-- 多图上传开始 -->
    <script>
        window.EASY_UPLOAD_HOME_URL = "${web_domain}/uploads/";
    </script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.config.js"></script>
    <script type="text/javascript" src="${web_domain}/uploads/ueditor.all.js"></script>
    <script type="text/plain" id="uploadsPlugin"></script>
    <input type="hidden" id="currentUploadValue"/>
    <!-- 多图上传结束 -->

</div>

<script type="text/javascript" src="${web_domain}/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="${web_domain}/ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="${web_domain}/ueditor/lang/zh-cn/zh-cn.js"></script>
<script>

    //多图上传成功后的回调
    function uploadSuccessCallback(url, original) {
        $("#goodsImages-defaultImage").remove();
        var id = Math.random();
        var html = " <li id='li" + id + "' style='display: inline-block; text-align: center; margin: 10px 15px;'> <img style='width:100px;height:100px; display: block; margin-bottom: 5px;' class='feijin-images' data-src='" + original + "' src='" + url + "' /> <i class='i-close feijin-remove' data='" + id + "'><i class='layui-icon layui-btn layui-btn-danger layui-btn-xs'>&#xe640;</i></i></li>";
        $("#feijinImageArea").html($("#feijinImageArea").html() + html);
    }

    layui.use(['form', 'laydate', 'layer'], function () {

        var layer = layui.layer;
        var form = layui.form;
        var addAttributeBtn = $(".add-attribute-btn");

        //添加商品参数
        $("#feijin-addParams").click(function () {
            var id = Math.floor(Math.random() * 10000);
            var html = "<div id='feijin-params-item-" + id + "'>";
            html += "<input type='text' class='layui-inline layui-input feijin-params-key' placeholder='<fmt:message key='qsrcsmc' />' data-index='" + id + "' style='width:200px;display: inline-block;'/><b>:&nbsp;&nbsp;</b>";
            html += "<input type='text' class='layui-inline layui-input' id='feijin-params-value-" + id + "' placeholder='<fmt:message key='qsrcsz' />' style='width:200px;display: inline-block;'/>";
            html += "<a href='javascript:void(0);' class='feijin-params-remove' data-index='" + id + "' style='margin-left: 10px;color:red;'><fmt:message key='sc' /></a>";
            html += "</div>";

            $("#feijin-goods-params-area").append(html);
        });

        //删除商品参数
        $(document).on("click", ".feijin-params-remove", function () {
            var id = $(this).attr("data-index");
            $("#feijin-params-item-" + id).remove();
        });

        function getAttributeLength() {
            return $(".goods-attribute").length;
        }

        function getRowspan(data, rank) {
            var sum = 1;
            for (var i = rank; i < data.length; i++) {
                sum *= data[i].length;
            }
            return sum;
        }


        var oldValues = {};
        var skuTable = $("#feijin-sku-table");

        //生成sku
        function buildSKU() {

            $.each(skuTable.find("tr td input"), function (index, item) {
                oldValues[$(item).attr("id")] = $(item).val();
            });

            var attributeLength = getAttributeLength();
            var attributes = [];
            var html = "<thead>";
            $(".attribute-select").each(function (index, item) {
                if ($(item).find("option:selected").text() !== "请选择") {
                    html += "<th id='th-" + item.id + "'>" + $(item).find("option:selected").text() + "</th>";
                }

                var attribute1 = [];
                // var i = (index === 0 ? 0 : 1) + 1;

                // $(this).parent().find(".attribute" + i + "-feijin-attribute-checkbox:checked").each(function (checkboxindex2, checkboxitem2) {
                $(this).parent().find(".attribute-value:checked").each(function (_, checkboxitem2) {
                    // var attribute11 = {};
                    // attribute11.id = $(checkboxitem2).val();
                    // attribute11.name = $(checkboxitem2).attr("title");
                    // attribute11.value = $(checkboxitem2).val();
                    attribute1.push(checkboxitem2);
                    //
                });

                attributes.push(attribute1);
            });

            // html += "<th>是否可售</th><th>商品重量(KG)</th><th>是否样品</th><th>商家编号</th><th class='store-hide'><b style='color:red'>*</b> 起批量</th><th><b style='color:red'>*</b> 起批价</th></thead><tbody>";
            html += "<th><fmt:message key='sjbh' /></th><th><b style='color:red'>*</b> <fmt:message key='kcs' /></th><th><b style='color:red'>*</b> <fmt:message key='xsj' /></th></thead><tbody>";

            if (attributeLength !== attributes.length || attributes.length === 0) {
                return;
            }

            switch (attributes.length) {
                case 1:
                    $(attributes[0]).each(function (index, item) {
                        html += "<tr>";
                        html += "<td>" + $(item).attr("title") + "</td>";

                        var id = $(item).val();
                        html += "<td><input type='text' data-id='" + id + "' data-index='" + index + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + id + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + id + "'/></td>";
                        html += "</tr>";
                    });
                    break;
                case 2:
                    $(attributes[0]).each(function (index, item) {
                        $(attributes[1]).each(function (index1, item1) {
                            html += "<tr>";
                            if (index1 === 0) {
                                html += "<td rowspan='" + getRowspan(attributes, 1) + "'>" + $(item).attr("title") + "</td>";
                            }
                            html += "<td>" + $(item1).attr("title") + "</td>";

                            var id = $(item).val() + "-" + $(item1).val();
                            html += "<td><input type='text' data-id='" + id + "' data-index='" + index1 + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + id + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + id + "'/></td>";
                            html += "</tr>";
                        });
                    });
                    break;
                case 3:
                    $(attributes[0]).each(function (index, item) {
                        $(attributes[1]).each(function (index1, item1) {
                            $(attributes[2]).each(function (index2, item2) {
                                html += "<tr>";
                                if (index2 === 0) {
                                    if (index1 === 0) {
                                        html += "<td rowspan='" + getRowspan(attributes, 1) + "'>" + $(item).attr("title") + "</td>";
                                    }
                                    html += "<td rowspan='" + getRowspan(attributes, 2) + "'>" + $(item1).attr("title") + "</td>";
                                }
                                html += "<td>" + $(item2).attr("title") + "</td>";

                                var id = $(item).val() + "-" + $(item1).val() + "-" + $(item2).val();
                                html += "<td><input type='text' data-id='" + id + "' data-index='" + index2 + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + id + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + id + "'/></td>";
                                html += "</tr>";
                            });
                        });
                    });
                    break;
                case 4:
                    $(attributes[0]).each(function (index, item) {
                        $(attributes[1]).each(function (index1, item1) {
                            $(attributes[2]).each(function (index2, item2) {
                                $(attributes[3]).each(function (index3, item3) {
                                    html += "<tr>";
                                    if (index3 === 0) {
                                        if (index2 === 0) {
                                            if (index1 === 0) {
                                                html += "<td rowspan='" + getRowspan(attributes, 1) + "'>" + $(item).attr("title") + "</td>";
                                            }
                                            html += "<td rowspan='" + getRowspan(attributes, 2) + "'>" + $(item1).attr("title") + "</td>";
                                        }
                                        html += "<td rowspan='" + getRowspan(attributes, 3) + "'>" + $(item2).attr("title") + "</td>";
                                    }
                                    html += "<td>" + $(item3).attr("title") + "</td>";

                                    var id = $(item).val() + "-" + $(item1).val() + "-" + $(item2).val() + "-" + $(item3).val();
                                    html += "<td><input type='text' data-id='" + id + "' data-index='" + index3 + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + id + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + id + "'/></td>";
                                    html += "</tr>";
                                });
                            });
                        });
                    });
                    break
                case 5:
                    $(attributes[0]).each(function (index, item) {
                        $(attributes[1]).each(function (index1, item1) {
                            $(attributes[2]).each(function (index2, item2) {
                                $(attributes[3]).each(function (index3, item3) {
                                    $(attributes[4]).each(function (index4, item4) {
                                        html += "<tr>";
                                        if (index4 === 0) {
                                            if (index3 === 0) {
                                                if (index2 === 0) {
                                                    if (index1 === 0) {
                                                        html += "<td rowspan='" + getRowspan(attributes, 1) + "'>" + $(item).attr("title") + "</td>";
                                                    }
                                                    html += "<td rowspan='" + getRowspan(attributes, 2) + "'>" + $(item1).attr("title") + "</td>";
                                                }
                                                html += "<td rowspan='" + getRowspan(attributes, 3) + "'>" + $(item2).attr("title") + "</td>";
                                            }
                                            html += "<td rowspan='" + getRowspan(attributes, 4) + "'>" + $(item3).attr("title") + "</td>";
                                        }
                                        html += "<td>" + $(item4).attr("title") + "</td>";

                                        var id = $(item).val() + "-" + $(item1).val() + "-" + $(item2).val() + "-" + $(item3).val() + "-" + $(item4).val();
                                        html += "<td><input type='text' data-id='" + id + "' data-index='" + index4 + "' class='layui-input feijin-skuCode'/></td><td><input type='text' class='layui-input' id='feijin-skuStore-" + id + "'/></td><td><input type='text' class='layui-input' id='feijin-skuPrice-" + id + "'/></td>";
                                        html += "</tr>";
                                    });
                                });
                            });
                        });
                    });
                    break
            }

            html += "</tbody>";
            skuTable.html(html);
            form.render();
        }


        //运费方式设置
        form.on('radio(postageType)', function (data) {
            var id = data.value;

            if (id == 1) {
                $("#templateArea").show();
                $("#postageArea").hide();
            }

            if (id == 2) {
                $("#templateArea").hide();
                $("#postageArea").hide();
            }

            if (id == 3) {
                $("#templateArea").hide();
                $("#postageArea").show();
            }
        });

        //是否有规格
        form.on('radio(haveSku)', function (data) {

            if (data.value == 1) {
                $(".attributeArea").show();
                $(".noAttributeArea").hide();
            } else {
                $(".attributeArea").hide();
                $(".noAttributeArea").show();
            }

        });

        //规格类目
        form.on('select(feijin-attributechannel-select)', function (data) {
            var id = data.value;
            if (id == '0') {
                var options = "<option value='0' ><fmt:message key='qxz' /></option>";
                <c:forEach items="${attributes}" var="item">
                    options += "<option value='${item.id}'>${item.name}<c:if test="${item.type == 1}"><fmt:message key='pt' /></c:if><c:if test="${item.type == 2}"><fmt:message key='zijian' /></c:if></option>";
                </c:forEach>
                $(".remove-attribute-btn").click();
                $(".attribute-select").html(options);
                $("#hidden-attributeChannelRelevancy").attr("value", options);

                $("#attributeArea").html("");
                $(".attribute-values").html("");
                buildSKU();
                form.render('select');

            } else {
                $.ajax({
                    url: "${web_domain}/merchant/goods/attributeChannelsRelevancy?id=" + id,
                    type: "get",
                    dataType: "JSON",
                    success: function (result) {
                        if (result.status && result.result != null) {
                            // $(".attributeArea").html("");
                            $(".remove-attribute-btn").click();
                            $("#feijin-attributechannel-select-hidden").attr("value", $("#feijin-attributechannel-select-hidden").val() + ":" + id);
                            var channelsHTML = "<option value='0' ><fmt:message key='qxz' /></option>";
                            $.each(result.result, function (index, item) {
                                channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                            });
                            $(".attribute-select").html(channelsHTML);
                            $("#hidden-attributeChannelRelevancy").attr("value", channelsHTML);

                            $(".attribute-values").html("");
                            buildSKU();
                            form.render('select');//重新渲染
                        }
                    }
                });
            }
        });

        //添加商品规格
        addAttributeBtn.click(function () {
            var channelsHTML = "<div class='layui-form-item goods-attribute'>" +
                "                   <label class='layui-form-label'><b style='color:red'>*</b> <fmt:message key='gg' /></label>" +
                "                   <div class='layui-input-inline'>" +
                "                       <select class='layui-input attribute-select' lay-filter='attribute-select'>" +
                $("#hidden-attributeChannelRelevancy").val() +
                "                       </select>" +
                "                       <div style='width:600px;' class='layui-input-inline attribute-values'></div>" +
                "                   </div>" +
                "                   <a href='javascript:void(0);' class='remove-attribute-btn' style='color:red; line-height: 38px;'>删除</a>" +
                "               </div>";

            $(".goods-attribute:last").after(channelsHTML);
            if ($(".goods-attribute").length >= 5) {
                addAttributeBtn.hide();
            }
            form.render('select');
            buildSKU();
        });

        //删除销售规格
        $(document).on('click', '.remove-attribute-btn', function () {
            $(this).parent().remove();
            // form.render("select");
            addAttributeBtn.show();
            buildSKU();
        });

        //选择商品规格
        form.on('select(attribute-select)', function (data) {

            if (data.value) {
                $.ajax({
                    url: "${web_domain}/merchant/goods/attributes?id=" + data.value,
                    type: "get",
                    dataType: "JSON",
                    success: function (result) {
                        if (result.status && result.result != null) {
                            var channelsHTML = "";
                            $.each(result.result, function (index, item) {
                                channelsHTML += "<input type='checkbox' class='attribute-value' lay-filter='attribute-value' value='" + item.id + "' title='" + item.name + "' />"
                            });
                            $(data.elem).nextAll(".attribute-values").html(channelsHTML);
                            form.render('checkbox');
                            buildSKU();
                        }
                    }
                });
            } else {
                $("#attributeArea").html("");
                buildSKU();
            }
        });

        //选择商品规格值
        form.on('checkbox(attribute-value)', function () {
            buildSKU();
        });

        //加载二级商品类目
        form.on('select(topChannel)', function (data) {
            if (data.elem != data.value) {
                var id = $("#topChannel").val();
                $(".middleChannel").remove();
                $(".bottomChannel").remove();

                $.ajax({
                    url: "${web_domain}/merchant/goods/childChannels?id=" + id,
                    type: "get",
                    dataType: "JSON",
                    success: function (result) {
                        if (result.status && result.result != null) {
                            var channelsHTML = "<div class='layui-inline middleChannel'>" +
                                "<div class='layui-input-inline' style='width: 130px' >" +
                                "<select lay-verify='required' id='middleChannel' class='layui-input' lay-filter='middleChannel'>" +
                                "<option value=''><fmt:message key='qxz' /></option>";
                            $.each(result.result, function (index, item) {
                                channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                            });
                            channelsHTML += "</select></div></div>";
                            $(".goodsChannelArea").append(channelsHTML);
                            form.render('select');//重新渲染
                        }
                    }
                });
            }
        });

        //加载三级商品类目
        form.on('select(middleChannel)', function (data) {
            if (data.elem != data.value) {
                var id = $("#middleChannel").val();
                $(".bottomChannel").remove();

                $.ajax({
                    url: "${web_domain}/merchant/goods/childChannels?id=" + id,
                    type: "get",
                    dataType: "JSON",
                    success: function (result) {
                        if (result.status && result.result != null) {
                            var channelsHTML = "<div class='layui-inline bottomChannel'>" +
                                "<div class='layui-input-inline' style='width: 130px' >" +
                                "<select lay-verify='required' name='goodsChannel.id' id='bottomChannel' class='layui-input' lay-filter='bottomChannel'>" +
                                "<option value=''><fmt:message key='qxz' /></option>";
                            $.each(result.result, function (index, item) {
                                channelsHTML += "<option value='" + item.id + "' >" + item.name + "</option>"
                            });
                            channelsHTML += "</select></div></div>";
                            $(".goodsChannelArea").append(channelsHTML);
                            form.render('select');//重新渲染
                        }
                    }
                });
            }
        });


        form.on('submit(submit)', function () {

            var unit = $("#feijin-unitId").val();
            if (unit == 0) {
                layer.msg("<fmt:message key='qxzxdw' />");
                return;
            }

            var images = [];
            $(".feijin-images").each(function (index, item) {
                var name = $(item).attr("data-src");
                images.push(name);
            });

            if (images.length === 0) {
                layer.msg("<fmt:message key='spxcbnwk' />");
                return;
            }
            $("#feijin-imagesData").attr("value", images.join(";"));

            if (!$("#defaultImage").val()) {
                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qscspfmtp' />");
                });
                return false;
            }

            if (!$("input[name='haveSku']:checked").val()) {
                layui.use('layer', function () {
                    layer.msg("<fmt:message key='qxzsfygg' />");
                });

                return false;
            }


            var saleAttributes = [];
            var skus = [];
            var msg = "";

            if ($("input[name='haveSku']:checked").val() === "1") {

                //规格处理
                $(".attribute-select").each(function (index, item) {
                    var id = $(item).val();
                    var checkedAttributes = [];
                    $(item).nextAll(".attribute-values").find(".attribute-value:checked").each(function (checkedIndex, checkedItem) {
                        var itemId = $(checkedItem).val();
                        checkedAttributes.push(itemId);
                    });
                    saleAttributes.push(id + ":" + checkedAttributes.join("-"));
                });


                //sku处理
                $(".feijin-skuCode").each(function (index, item) {

                    var id = $(item).attr("data-id");
                    var dataIndex = $(item).attr("data-index");

                    var code = $(item).val();
                    var store = $("#feijin-skuStore-" + id).val();
                    var price = $("#feijin-skuPrice-" + id).val();

                    if (!store && !msg) {
                        msg = "<fmt:message key='qtxkc' />";
                        return;
                    }
                    if (!price && !msg) {
                        msg = "<fmt:message key='qtxxfj' />";
                        return;
                    }
                    var sku = {
                        skuNo: id,
                        code: code,
                        store: store,
                        price: price
                    };
                    skus.push(JSON.stringify(sku));
                });
            } else {
                //默认规格
                saleAttributes.push("1:2");

                //默认sku
                var sku = {};
                sku.skuNo = "2";
                sku.code = $("#default-skuCode").val();
                sku.store = $("#default-skuStore").val();
                sku.price = $("#default-skuPrice").val();
                skus.push(JSON.stringify(sku));
            }

            if (skus.length === 0) {
                layer.msg("<fmt:message key='qzsxzygspgg' />");
                return false;
            }
            $("#saleAttributeData").attr("value", saleAttributes.join(";"));
            $("#skusData").attr("value", "[" + skus.join(",") + "]");


            //商品参数
            var goodsParams = [];
            $(".feijin-params-key").each(function (index, item) {
                var id = $(item).attr("data-index");
                var key = $(item).val();
                var value = $("#feijin-params-value-" + id).val();

                var goodsParamsItem = {};
                goodsParamsItem.paramsName = key;
                goodsParamsItem.paramsValue = value;
                goodsParams.push(JSON.stringify(goodsParamsItem));
            });
            $("#paramsData").attr("value", "[" + goodsParams.join(",") + "]");

            //富文本处理
            var content = UE.getEditor('feijin-content').getContent();
            if (!content) {
                layer.msg("<fmt:message key='spmsbnwk' />");
                return;
            }
            $("#content").attr("value", content);


            $("#form").ajaxSubmit({
                success: function (result) {
                    if (result.status) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.$("#search").click();
                    } else {
                        layer.alert(result.message);
                    }
                }
            });
        });


        <%--<option value="">请选择</option>--%>
        <%--    <c:forEach items="${attributes}" var="item">--%>
        <%--       <option value="${item.id}" <c:if test="${item.id == sale.attributeId}">selected</c:if>>${item.name}--%>
        <%--    </option>--%>
        <%--</c:forEach>--%>


        (function () {
            var options = "<option value='0' ><fmt:message key='qxz' /></option>";
            <c:forEach items="${attributes}" var="item">

            options += "<option value='${item.id}'>${item.name} <c:if test="${_method eq 'POST' and item.type == 1}"><fmt:message key='pt' /></c:if><c:if test="${_method eq 'POST' and item.type == 2}"><fmt:message key='zijian' /></c:if> </option>";

            <%--options += "<option value='${item.id}'>${item.name}【自建】</option>";--%>
            </c:forEach>
            $("#hidden-attributeChannelRelevancy").attr("value", options);
            var id = $("input[name='postageType']:checked").val();
            if (id == 3) {
                $("#postageArea").show();
            }
            if (id == 1) {
                $("#templateArea").show();
            }
        })();

        //删除上传的图片
        $(document).on('click', '.feijin-remove', function () {
            $(this).parent().remove();
        });

        //多图上传插件
        EASY_UP.getEditor('uploadsPlugin').addListener("ready", function () {

//            var id = $('.edui-for-insertimage').attr('id'); //加载完成后，通过此代码可以获取当前多图上传插件的动态id,edui-for-insertimage 是多图上传插件的class name
            var multisUploadsPlugin = $EDITORUI['edui8'];

            //多图上传-门店门面图片上传
            $("#choose-goodsImages").click(function () {
                $("#currentUploadValue").attr("value", "goodsImages");
                multisUploadsPlugin._onClick(event, this);
            });

        });

        UE.getEditor('feijin-content');
        var contentEdit = UE.getEditor('feijin-content');

        contentEdit.addListener("ready", function () {
            UE.getEditor('feijin-content').setContent($("#content").val());
        });

        //商品封面图片上传
        $("#choose-defaultImage").click(function () {
            $("#defaultImage-file").click();
        });

        $("#defaultImage-file").change(function () {
            $("#upload-defaultImage").ajaxSubmit({
                type: "post",
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#defaultImage").attr("value", result.path);
                        $("#feijinImage-defaultImage").html("<img src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });

        //商品资质证明图片上传
        $("#choose-qualificationImage").click(function () {
            $("#qualificationImage-file").click();
        });

        $("#qualificationImage-file").change(function () {
            $("#upload-qualificationImage").ajaxSubmit({
                type: "post",
                dataType: "JSON",
                success: function (result) {
                    if (result.status) {
                        $("#qualificationImage").attr("value", result.path);
                        $("#feijinImage-qualificationImage").html("<img src='${store_domain}/uploads/" + result.path + "' style='width:120px;height:120px;margin-top:10px;' />'");
                    }
                },
                error: function (result) {
                    console.log(result.responseText);
                }
            });
        });
    });

</script>
</body>
</fmt:bundle>
</html>